<template>
  <div>
    <Drawer width="50%" title="查看详情" placement="right" v-model:visible="visible" @close="onClose">
      <template #closeIcon>
        <arrow-left-outlined />
      </template>

      <Row>
        <Col span="12">
          <FormItem label="服务">{{ formState.serviceCode }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="实例">{{ formState.serviceInstanceName }}</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="实例版本">{{ formState.instanceVersion }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="实例所属路由链路 ">{{ formState.instanceRouteLinks }}</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="端点">{{ formState.endpointName }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="跨度类型">{{ formState.type }}</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="组件">{{ formState.component }}</FormItem>
        </Col>
        <Col span="12">
          <FormItem label="Peer">{{ formState.peer }}</FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="12">
          <FormItem label="错误">{{ formState.isError }}</FormItem>
        </Col>
      </Row>
      <Divider />
      <TypographyTitle :level="5">标记</TypographyTitle>
      <FormItem v-for="item in tag" :label="item.key" :key="item.key">{{ item.value }}</FormItem>
    </Drawer>
  </div>
</template>
<script lang="ts" setup>
import { Drawer, Row, Col, FormItem, Divider, TypographyTitle } from 'ant-design-vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { reactive, ref } from 'vue';
import { TagItem } from '/@/api/maintenance-center/skywalking/trace/model/traceModel';
import { getInstanceInfo } from '/@/api/maintenance-center/skywalking/trace/trace';

const visible = ref(false);
const formState = reactive({
  serviceCode: undefined,
  endpointName: undefined,
  serviceInstanceName: '无',
  type: undefined,
  component: undefined,
  peer: undefined,
  isError: false,
  instanceRouteLinks: '无',
  instanceVersion: '无',
});
const tag = ref<TagItem[]>([]);
let instanceParam = {};
const openDetail = async (record) => {
  formState.serviceCode = record.serviceCode;
  formState.endpointName = record.endpointName;
  if (record.serviceInstanceName) {
    formState.serviceInstanceName = record.serviceInstanceName;
  }
  formState.type = record.type;
  formState.component = record.component;
  formState.peer = record.peer;
  formState.isError = record.isError;
  tag.value = record.tags;
  visible.value = true;
  if (record.serviceCode && record.serviceInstanceName && record.startTime && record.endTime) {
    instanceParam = {
      serviceCode: record.serviceCode,
      serviceInstanceName: record.serviceInstanceName,
      startTime: record.startTime,
      endTime: record.endTime,
    };

    let res = await getInstanceInfo(instanceParam);
    formState.instanceRouteLinks = res.instanceRouteLinks;
    formState.instanceVersion = res.instanceVersion;
  }
};
const onClose = () => {
  visible.value = false;
};

defineExpose({ openDetail });
</script>
